<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" customClass="customWidth" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
			<el-row :gutter="24">
				<el-col :lg="24">
					<el-form-item label="事项" prop="subject">
						<el-input v-model="form.subject" placeholder="事项" clearable maxlength="40"></el-input>
					</el-form-item>
				</el-col>
				<el-col :lg="24">
					<el-form-item label="时间" prop="begin_time">
						<el-date-picker v-model="form.begin_time" :disabled-date="publishDateAfter" placeholder="时间" type="date" value-format="YYYY-MM-DD HH:mm" style="width: 100%;"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :lg="24">
					<el-form-item label="负责人" prop="user_join">
						<select-user-dialog v-model:accountId="form.user_join" :mode="true"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider content-position="center">推荐空间</el-divider>
			<sc-form-table v-model="form.space_list"  :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
				<el-table-column prop="space_id" label="空间名称" width="200">
					<template #default="scope">
							<el-select
								v-model="scope.row.space_id"
								filterable
								remote
								reserve-keyword
								placeholder="请输入关键词"
								:remote-method="remoteSpaceMethod"
								:loading="loading"
								style="width:100%"
								@change="setOtherValue(scope.row, scope.$index)"
							>
								<el-option v-for="item in spaceOptions" :key="item.id" :label="item.room" :value="item.id"></el-option>
							</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="park_id" label="所属园区" width="100" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.park_id}}
					</template>
				</el-table-column>
				<el-table-column prop="area_id" label="所属片区" width="100" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.area_id}}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="所属楼宇" width="100" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.name}}
					</template>
				</el-table-column>
				<el-table-column prop="floor" label="所属楼层" width="100" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.floor}}
					</template>
				</el-table-column>
				<el-table-column prop="room_size" label="空间面积" width="100" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.room_size}}
					</template>
				</el-table-column>
				<el-table-column prop="rental_pricing" label="租金定价" width="100" align="center" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.rental_pricing}}
					</template>
				</el-table-column>
			</sc-form-table>
			<el-form-item label="其它需求" style="margin-top: 10px;">
				<el-input v-model="form.content" type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="其它需求"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 定</el-button>
		</template>
	</el-dialog>

</template>
<script>
import selectUserDialog from "@/views/module/selectUserDialog";
import selectDeptDialog from "@/views/module/selectDeptDialog";
import selectUserLevelDialog from "@/views/module/selectUserLevelDialog";
import {defineAsyncComponent} from "vue";
import msgBoxCheckBox from "@/views/module/msgBoxCheckBox";
import AttachMenu from '@/views/module/attachMenu'
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
export default {
	emits: ['success', 'closed'],
	components: {
		selectUserLevelDialog,
		msgBoxCheckBox,
		selectUserDialog,
		selectDeptDialog,
		AttachMenu,
		scEditor
	},
	data() {
		return {
			addTemplate: {
				space_id: "",
				park_id: "",
				area_id: "",
				building_id: "",
				rental_pricing: 0,
				name: "",
				floor: "",
				room_size: 0,
			},
			visible: false,
			isSaveing: false,
			isShowMsg: false,
			floorList:[],
			roomList:[],
			deviceList:[],
			mode: "add",
			titleMap: {
				add: '添加预约',
				edit: '编辑预约',
				show: '查看预约'
			},
			fileList: [],
			apiObj: this.$API.file.attach.uploadFile,
			templates: [],
			form: {
				meetingId: '',
				subject: '',
				meetingType: '',
				tel: '',
				chair: '',
				notesUser: '',
				roomId: '',
				begin_time: '',
				end_time: '',
				userJoin: '',
				deptJoin: '',
				levelJoin: '',
				otherJoin: '',
				content: '',
				msgType: '',
				attachId: ''
			},
			spaceOptions: [],
			spaceOriginOptions: [],
			formSpace:{},
			formPackage:{},
			formPS:{},
			rules: {
				subject: [
					{required: true, message: '预约事项不能为空', trigger: 'blur'}
				]
			}
		}
	},

	methods: {
		async remoteMethod(keyword) {
			let res = await this.$API.crm.crmCustomer.getAllCustomerListForSelect.get({keyword: keyword});
			if (res.code == 200) {
				this.options = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		isValid(data){
			if (Object.prototype.toString.call(data) === '[object Undefined]') {
				return false
			}
			if (Object.prototype.toString.call(data) === '[object Null]') {
				return false
			}
			return true
		},
		async getSpaceListByBuildingId(value) {
			if(!this.isValid(value)){
				value = null
			}
			let res = await this.$API.attractinvestment.space.getSpaceAreaList.get({id: value});
			if (res.code == 200) {
				
				this.spaceOptions = res.data.filter(space => space.category != 4);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async remoteSpaceMethod(keyword) {
			console.log(this.form.building_id)
			// const building_id = this.isValid(this.form.building_id) ? this.form.building_id : 12; //开发模式
				// 如果keyword开头为0，则删除开头多余的0
			if(keyword.startsWith('0')){
				keyword = keyword.substr(1);
			}
			if(keyword.length>0){
				console.log('keyword is ', keyword)
				this.spaceOptions = this.spaceOriginOptions.filter(e=>{return e.room.includes(keyword)})
			}else{
				console.log('keyword is null')
				this.spaceOptions = this.spaceOriginOptions;
			}
		},
		setOtherValue(row,index)
		{
			this.spaceOptions.forEach(item=>{
				if(item.id==row.space_id)
				{
					row.park_id = item.park_id;
					row.area_id = item.area_id;
					row.building_id = item.building_id;
					row.rental_pricing = item.rental_pricing;
					row.name = item.name;
					row.floor = item.floor;
					row.room_size = item.room_size;
				}
			})

		},
		publishDateAfter(time){
			return time.getTime()<(Date.now()-24*60*60*1000)
		},
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res;
					console.log(this.form)
						const spaceIdArr = []
						this.form.space_list.forEach(async e=>{
							spaceIdArr.push(e.space_id)
							await this.$API.attractinvestment.space.updateSpace.post({id:e.space_id,category:3});
						})
						this.form.space_ids = spaceIdArr.join(',')
						delete this.form.space_list
						this.form.space_id = this.form.space_ids
						delete this.form.space_ids
					if (this.mode == "add") {
						
						res = await this.$API.attractinvestment.appointment.insertAppointment.post(this.form);
					} else if (this.mode == "edit") {
						res = await this.$API.attractinvestment.appointment.updateAppointment.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit('success')
						this.visible = false;
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				}
			})
		},
		async getFloorList()
		{
			var res = await this.$API.attractinvestment.floor.getFloorList.get({'building_id': this.form.building_id});
			if (res.code == 200) {
				this.floorList = res.data.list;
			}
		},
		async getCanUseDeviceList()
		{
			var res = await this.$API.office.meeting.getCanUseDeviceList.get();
			if (res.code == 200) {
				this.deviceList = res.data;
			}
		},
		setCreateData(data,roomList)
		{
			this.roomList = roomList;
			this.form.subject = data.subject;
			this.form.roomId = data.roomId;
			this.form.begin_time = data.begin_time;
			this.form.end_time = data.end_time;
			debugger
			this.form.space_list = data.space_list;
			this.getSpaceListByBuildingId(data.building.id);
		},
		setData(data,roomList) {
			this.roomList = roomList;
			this.form.appointment_id = data.appointment_id;
			this.form.content= data.content;
			this.form.subject = data.subject;
			this.form.roomId = data.roomId;
			this.form.begin_time = data.begin_time;
			this.form.end_time = data.end_time;
			this.form.space_list = data.space_list;
			this.form.user_join = data.user_join;
			this.getSpaceListByBuildingId(data.building.id);
		},
		addNewFile(res, file)
		{
			let tArr = this.form.attachId.split(",");
			tArr.push(res.data.attachId);
			this.form.attachId = tArr.join(",");
		},
	}
}
</script>

<style>
.customWidth {
	width: 60%;
}
</style>
